feat(image): honor alignment + surface display size for migrated images (#1404) by SailingGreg · Pull Request #1406 · emdash-cms/emdash

SailingGreg · 2026-06-11T13:37:00Z

What does this PR do?

The Gutenberg to Portable Text importer captures WordPress image alignment on the image node, but it was dropped at render and not editable. This wires it through end to end and surfaces the existing display-size controls for migrated images.

Render (packages/core/src/components/Image.astro): emit emdash-image--align-{left,right,center,wide,full} from the nodes alignment`, with default CSS (left/right float and wrap text; center centers; wide/full span the column).
Editor (packages/admin): thread alignment through the PortableText/TipTap serializer (both directions) and the TipTap image node; add an Alignment selector to ImageDetailPanel; reflect alignment in the image NodeView so the editor preview matches the published output.
Display size: relax the gate from width && height to src so WordPress-imported images (which carry only displayWidth/displayHeight, no originals) are resizable; the aspect-ratio lock and reset-to-original degrade gracefully when originals are unknown.

Validated end to end on a real WordPress-migrated site: editor -> save -> published page all agree on the canonical alignment field.

Closes #1404

Type of change

Checklist

I have read CONTRIBUTING.md
pnpm typecheck passes
pnpm lint passes
pnpm test passes (or targeted tests for my change)
pnpm format has been run
I have added/updated tests for my changes (if applicable)
User-visible strings in the admin UI are wrapped for translation (if applicable)
I have added a changeset (this PR changes published packages)
New features link to an approved Discussion

AI-generated code disclosure

This PR includes AI-generated code — model/tool: Claude Opus 4.8 (via Claude Code)

Screenshots / test output

Container-render repro asserts the alignment class is emitted (default render and via a delegating component override); validated end to end on a live WordPress-migrated site (editor -> save -> published render).

…s#1404 render follow-up)

…-cms#1404 render follow-up) Renders the real RAFYC image node through astro-portabletext via the production dispatch (type.image -> Image.astro), default vs delegating override vs no-locals. All three emit a valid src: the override receives the full node intact and delegation to <Image> does NOT render empty. Confirms alignment is dropped.

…d images (emdash-cms#1404) Renderer (core/Image.astro): add alignment to the PT image node props and emit an emdash-image--align-{left,right,center,wide,full} figure class with default CSS (floats wrap text; wide/full span the column). Editor (admin): thread alignment through the PortableText<->TipTap serializer (both directions), the TipTap image node attribute/commands, and add an alignment selector to ImageDetailPanel. Also relax the Display Size gate from (width && height) to (src) so migrated WordPress images, which carry only displayWidth/displayHeight and no original dims, can still be resized; the aspect-ratio lock and reset-to-original now degrade gracefully when originals are unknown. Repro test asserts the renderer now emits the alignment class.

Float left/right (text wraps) and size center/wide/full in the TipTap image NodeView so the editor preview matches the published <Image> output.

changeset-bot · 2026-06-11T13:37:08Z

🦋 Changeset detected

Latest commit: a260b73

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
emdash	Patch
@emdash-cms/cloudflare	Patch
@emdash-cms/sandbox-workerd	Patch
@emdash-cms/fixture-perf-site	Patch
@emdash-cms/perf-demo-site	Patch
@emdash-cms/cache-demo-site	Patch
@emdash-cms/admin	Patch
@emdash-cms/auth	Patch
@emdash-cms/blocks	Patch
@emdash-cms/gutenberg-to-portable-text	Patch
@emdash-cms/x402	Patch
create-emdash	Patch
@emdash-cms/auth-atproto	Patch
@emdash-cms/plugin-embeds	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-06-11T13:39:38Z

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

SailingGreg · 2026-06-11T13:49:22Z

I have read the CLA Document and I hereby sign the CLA

…rences)

Add a max-width:640px media query so left/right-aligned images drop to full-width blocks on phones instead of staying floated and cramped.

github-actions · 2026-06-11T19:11:28Z

Overlapping PRs

This PR modifies files that are also changed by other open PRs:

feat(admin): optional link on portable-text image blocks #704 (4 shared files)
Store CSS classes, make editor toolbar extensible #143 (3 shared files)

This may cause merge conflicts or duplicated work. A maintainer will coordinate.

SailingGreg · 2026-06-12T08:20:40Z

Heads-up on the overlap notice

I checked the files this PR shares with the other open image PRs flagged by the overlap bot:

feat(admin): optional link on portable-text image blocks #704 (optional link on image blocks) — 4 shared files: Image.astro, editor/ImageNode.tsx, editor/ImageDetailPanel.tsx, PortableTextEditor.tsx
Store CSS classes, make editor toolbar extensible #143 (store CSS classes / extensible toolbar) — 3 shared files: Image.astro, editor/ImageDetailPanel.tsx, PortableTextEditor.tsx

The three PRs are additive and orthogonal — each threads a different image attribute (alignment here, link in #704, cssClasses in #143) through the same plumbing. The conflicts are almost entirely mechanical "keep all additions" at shared anchors (the ImageAttributes interface, the hasChanges/handleSave blocks, the TipTap addAttributes defaults).

The one spot needing a deliberate (but compatible) resolution is the <figure> tag in Image.astro: this PR and #143 both rewrite it to class:list, which merges cleanly to class:list={["emdash-image", alignment && \emdash-image--align-${alignment}`, extraClasses]}`.

Merge-order preference: happy to go in whatever order suits maintainers, but this one is the smallest and is green/review-ready, so merging it first would let #704/#143 rebase trivially. If #143 lands first instead, I'll fold alignment into its class:list.

pkg-pr-new · 2026-06-12T20:36:09Z

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@1406

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@1406

@emdash-cms/auth-atproto

npm i https://pkg.pr.new/@emdash-cms/auth-atproto@1406

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@1406

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@1406

@emdash-cms/contentful-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/contentful-to-portable-text@1406

emdash

npm i https://pkg.pr.new/emdash@1406

create-emdash

npm i https://pkg.pr.new/create-emdash@1406

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@1406

@emdash-cms/plugin-cli

npm i https://pkg.pr.new/@emdash-cms/plugin-cli@1406

@emdash-cms/plugin-types

npm i https://pkg.pr.new/@emdash-cms/plugin-types@1406

@emdash-cms/registry-client

npm i https://pkg.pr.new/@emdash-cms/registry-client@1406

@emdash-cms/registry-lexicons

npm i https://pkg.pr.new/@emdash-cms/registry-lexicons@1406

@emdash-cms/sandbox-workerd

npm i https://pkg.pr.new/@emdash-cms/sandbox-workerd@1406

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@1406

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@1406

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@1406

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@1406

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@1406

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@1406

@emdash-cms/plugin-field-kit

npm i https://pkg.pr.new/@emdash-cms/plugin-field-kit@1406

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@1406

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@1406

commit: a260b73

ascorbic

Overall good, but the tests need soem cleanup

ascorbic · 2026-06-12T20:36:23Z

@@ -0,0 +1,61 @@
+/**


This file isn't testing anything real: it's just testing its own local implementations. Delete it: the other test file has the real tests.

ascorbic · 2026-06-12T20:37:15Z

@@ -0,0 +1,70 @@
+import { PortableText } from "astro-portabletext";
+/**
+ * Faithful container render for the #1404 follow-up.


Suggested change

* Faithful container render for the #1404 follow-up.

ascorbic · 2026-06-12T20:37:47Z

+const imgSrc = (html: string) => html.match(/<img[^>]*\bsrc="([^"]*)"/)?.[1] ?? "(no <img>)";
+
+describe("faithful render of migrated image node", () => {
+	test("1. default type.image=Image.astro", async () => {


don't number tests

ascorbic · 2026-06-12T20:38:45Z

@@ -0,0 +1,24 @@
+import { getViteConfig } from "astro/config";


Is this file used anywhere? It looks like nothing is running these tests

SailingGreg added 4 commits June 11, 2026 13:34

test(repro): Image.astro src resolution for migrated nodes (emdash-cm…

63e2d8a

…s#1404 render follow-up)

feat(image): reflect alignment in the editor node view (emdash-cms#1404)

697f4e4

Float left/right (text wraps) and size center/wide/full in the TipTap image NodeView so the editor preview matches the published <Image> output.

github-actions Bot added review/needs-review No maintainer or bot review yet area/admin area/core size/L labels Jun 11, 2026

github-actions Bot added the cla: needed label Jun 11, 2026

emdashbot Bot and others added 2 commits June 11, 2026 13:39

style: format

2bfbcd3

chore: add changeset for image alignment fix (emdash-cms#1404)

9589973

github-actions Bot added a commit that referenced this pull request Jun 11, 2026

@SailingGreg has signed the CLA in #1406

631919d

github-actions Bot added cla: signed and removed cla: needed labels Jun 11, 2026

SailingGreg added 2 commits June 11, 2026 14:55

test: genericize emdash-cms#1404 repro comments (drop downstream refe…

85cbce5

…rences)

feat(image): un-float aligned images on narrow screens (emdash-cms#1404)

a260b73

Add a max-width:640px media query so left/right-aligned images drop to full-width blocks on phones instead of staying floated and cramped.

ascorbic added the bot:review Trigger an emdashbot code review on this PR label Jun 11, 2026

github-actions Bot added the overlap label Jun 11, 2026

ascorbic reviewed Jun 12, 2026

View reviewed changes

github-actions Bot added review/awaiting-author Reviewed; waiting on the author to respond and removed review/needs-review No maintainer or bot review yet labels Jun 13, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(image): honor alignment + surface display size for migrated images (#1404)#1406

feat(image): honor alignment + surface display size for migrated images (#1404)#1406
SailingGreg wants to merge 8 commits into
emdash-cms:mainfrom
SailingGreg:fix/image-work

SailingGreg commented Jun 11, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 11, 2026 •

edited

Loading

Uh oh!

SailingGreg commented Jun 11, 2026

Uh oh!

github-actions Bot commented Jun 11, 2026

Uh oh!

SailingGreg commented Jun 12, 2026

Uh oh!

pkg-pr-new Bot commented Jun 12, 2026

Uh oh!

ascorbic left a comment

Uh oh!

ascorbic Jun 12, 2026

Uh oh!

ascorbic Jun 12, 2026

Uh oh!

ascorbic Jun 12, 2026

Uh oh!

ascorbic Jun 12, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,24 @@
		import { getViteConfig } from "astro/config";

Conversation

SailingGreg commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

Checklist

AI-generated code disclosure

Screenshots / test output

Uh oh!

changeset-bot Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SailingGreg commented Jun 11, 2026

Uh oh!

github-actions Bot commented Jun 11, 2026

Overlapping PRs

Uh oh!

SailingGreg commented Jun 12, 2026

Heads-up on the overlap notice

Uh oh!

pkg-pr-new Bot commented Jun 12, 2026

Uh oh!

ascorbic left a comment

Choose a reason for hiding this comment

Uh oh!

ascorbic Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

ascorbic Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

ascorbic Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

ascorbic Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SailingGreg commented Jun 11, 2026 •

edited

Loading

changeset-bot Bot commented Jun 11, 2026 •

edited

Loading

github-actions Bot commented Jun 11, 2026 •

edited

Loading

ascorbic Jun 12, 2026 •

edited

Loading